<template>
  <div class="new-table-style">
    <section class="search-style-box" v-if="activeTab == 6">
      <el-form label-width="120px" size="small" :model="searchParams">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="开始时间" :rules="{ required: true, message: '请选择开始时间', trigger: 'change' }">
              <el-date-picker v-model="searchParams.geAccountingDate" type="month" value-format="timestamp" :picker-options="pickerOptionsStart" clearable placeholder="请选择"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结束时间" :rules="{ required: true, message: '请选择结束时间', trigger: 'change' }">
              <el-date-picker v-model="searchParams.leAccountingDate" type="month" value-format="timestamp" :picker-options="pickerOptions" clearable placeholder="请选择"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="事项">
              <el-select v-model="searchParams.chargeItemCode" clearable filterable>
                <el-option v-for="item in chargeList" :key="item.key" :label="item.value" :value="item.key" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-button type="primary" size="mini" class="f-right" @click="getList('')">查询</el-button>
            <el-button type="primary" size="mini" class="f-right margin-right-10" @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </section>
    <el-table :border="true" :data="tableData" align="left" v-if="tableData.length || activeTab != 6 || isSearch" row-key="primaryKey" default-expand-all :tree-props="{ children: 'child', hasChildren: 'hasChildren' }">
      <el-table-column label="事项" width="300">
        <template slot-scope="scope">
          <span>{{ scope.row.chargeItemName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="总金额(元)" width="160">
        <template slot-scope="scope">
          <span>{{ scope.row.amount | fmoneyThousand }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="col.label" align="center" :key="i" v-for="(col, i) in dateList" width="160">
        <template slot-scope="scope">
          <span>{{ scope.row.monthList[i] && scope.row.monthList[i].amount ? scope.row.monthList[i].amount : 0 | fmoneyThousand}}</span>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-if="total > 0" @change="pageChange" :total="total" paginationLayout="total, prev, pager, next" />

    <div class="absolute-box btn-box">
      <el-button type="primary" size="mini" @click="exportFn">导出</el-button>
    </div>
  </div>
</template>

<script>
  import { apiComputationPayTree, apiCashOutExport } from '../../../api/financeCalculate';
  import { accSubtr } from '@/common/js/utils.js';

  export default {
    name: 'billTable',
    props: {
      activeTab: {
        type: String,
        default: '',
      },
      chargeList: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },
    data() {
      return {
        pickerOptions: {
          disabledDate: time => {
            if (this.searchParams.geAccountingDate) {
              return time.getTime() < this.searchParams.geAccountingDate;
            }
          },
        },
        pickerOptionsStart: {
          disabledDate: time => {
            if (this.searchParams.leAccountingDate) {
              return time.getTime() > this.searchParams.leAccountingDate;
            }
          },
        },
        searchParams: {},
        tableData: [],
        total: 0,
        currentPage: 1,
        pageSize: 10,
        dateList: [],
        isSearch: false
      };
    },
    methods: {
      init() {
        if (this.activeTab != 6) {
          this.setDateList();
          this.getList();
        }
      },
     
      reset () {
        this.searchParams = {}
        this.isSearch = false
      },
      setDateList() {
        let dateList = [];

        if (this.activeTab != 6) {
          let nowDate = new Date();

          for (let i = 1; i <= 12; i++) {
            dateList.push({
              label: nowDate.getFullYear() + '年' + i + '月',
              key: nowDate.getFullYear() + '-' + (i > 10 ? i : '0' + i),
            });
          }
        } else {
          let startDate = new Date(this.searchParams.geAccountingDate);
          let endDate = new Date(this.searchParams.leAccountingDate);
          let endYear = endDate.getFullYear();
          let endMonth = endDate.getMonth() + 1;
          let currentYear = startDate.getFullYear();
          let currentMonth = startDate.getMonth() + 1;

          while (currentYear < endYear || (currentYear == endYear && currentMonth <= endMonth)) {
            dateList.push({
              label: currentYear + '年' + currentMonth + '月',
              key: currentYear + '-' + (currentMonth > 10 ? currentMonth : '0' + currentMonth),
            });

            if (currentMonth < 12) {
              currentMonth++;
            } else {
              currentMonth = 1;
              currentYear++;
            }
          }
        }

        this.dateList = dateList;
      },
      //数据源
      async getList(more) {
        if (this.activeTab == 6) {
          if (!this.searchParams.geAccountingDate || !this.searchParams.leAccountingDate) {
            this.$message({
              message: '请选择确定的时间段查询',
              type: 'warning',
            });

            return;
          }

          this.isSearch = true
          this.setDateList();
        }

        let res = await apiComputationPayTree({
          queryType: this.activeTab,
          ...this.searchParams,
        });

        if (res.rows && res.rows.length > 0) {
          res.rows.forEach(item => {
            let differenceVal = accSubtr(Number(item.amountReceived), Number(item.usedAmount));
            item.amountRemaining = accSubtr(Number(differenceVal), Number(item.refundAmount));
          });
        }
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      },

      //分页
      pageChange(page) {
        this.currentPage = page.currentPage;
        this.getList('more');
      },

      //导出
      exportFn(){
        apiCashOutExport({
          queryType: this.activeTab,
          ...this.searchParams
        })
      }
    },
  };
</script>

<style lang="scss" scoped>
  .search-style-box {
    background: #fbfbfb;
    border-radius: 3px;
    padding: 20px 20px 0;
    margin-bottom: 20px;
  }

  .btn-box {
    right: 0;
    top: -49px;
  }
</style>
